<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<link th:href="@{/ajax/libs/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>-->
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/datapicker/datepicker3.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<body class="white-bg">
<div class="ibox-content">
    <div class="form-horizontal m">
            <div class="form-group">
                <div class="alert alert-info" role="alert">Note: upload <b style="color: red">2</b> files at a time, automatically distinguish t-order
                    <button onclick="DownloadXls()" style="float: right" class="btn btn-success  dim" type="button"><i
                            class="fa fa-upload"></i> Download the template
                    </button>
                </div>
            </div>

            <div class="form-group">
                <form id="my-awesome-dropzone" class="dropzone">
                    <div class="dropzone-previews"></div>

                </form>
            </div>
        <form class="form-horizontal m" id="form-fbsHead-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">name：</label>
                <div class="col-sm-8">
                    <input id="names" name="names" class="form-control" type="text" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">warehousingTime：</label>
                <div class="col-sm-8">
                    <input id="intoDate" name="intoDate" type="text" class="form-control" value="" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">remark：</label>
                <div class="col-sm-8">
                    <input id="bz" name="bz" class="form-control" type="text" autocomplete="off">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary">submit</button>
                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
                </div>
            </div>
        </form>
    </div>


    <div style="display: none" id="error_layer">
        <table id="bootstrap-table-err" data-mobile-responsive="true">
            <thead>
            <tr>
                <th data-field="low">column</th>
                <th data-field="row">row</th>
                <th data-field="errorValue">error message</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div th:include="include::footer"></div>
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<script type="text/javascript">


    $('#intoDate').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true,
    });

    var jsonObj = {};
    jsonObj.excleList = [];

    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: ftp_url+"/module/fbsHead/FileUploadServletAsXls", //必须填写
        method: "post",  //也可用put
        paramName: "exclefile", //默认为file
        addRemoveLinks: true,
        maxFiles: 10,//一次性上传的文件数量上限
        maxFilesize: 20, //MB
        acceptedFiles: ".xls,.xlsx,.pdf", //上传的类型
        parallelUploads: 3,
        dictMaxFilesExceeded: "You can upload a maximum of 2 files！",
        dictResponseError: 'File upload failed!',
        dictInvalidFileType: "You cannot upload this type of file, the file type can only be *.xls,*.xlsx。",
        dictFallbackMessage: "The browser is not supported",
        dictFileTooBig: "File size too large to upload file maximum support.",
        init: function () {
            this.on("addedfile", function (file) {
                //上传文件时触发的事件
                var myDropzone = this;
                var fileName = file.name;
                //
                var arr = jsonObj.excleList;
                /*for( var i = 0; i < arr.length; i++ ){
                    if( arr[i].fileName == fileName ){
                        var index = layer.alert("上传列表存在重复文件！如确认需要上传，请将文件改名后进行操作。",{
                            skin: 'layui-layer-lan',
                            closeBtn: 0
                        },function () {
                            myDropzone.removeFile(file);
                            layer.close(index);
                        });
                        break;
                    }
                }*/
                return;
            });
            this.on("queuecomplete", function (file) {
                //上传完成后触发的方法
            });
            this.on("removedfile", function (file) {
                //删除文件时触发的方法
                this.setupEventListeners();
                var fileName = file.name;
                var arr = jsonObj.excleList;
                for (var i = arr.length - 1; i >= 0; i--) {
                    if (arr[i].fileName == fileName) {
                        if (this.getAcceptedFiles().length === this.options.maxFiles) {
                            break;
                        }
                        jsonObj.excleList.splice(i, 1);
                        break;
                    }
                }
            });
            this.on("success", function (file, data) {
                var fileName = data.msg;
                var fileUrl = data.detail;
                var excleObj = {};

                excleObj.fileName = fileName;
                excleObj.fileUrl = fileUrl;
                jsonObj.excleList.push(excleObj);
            });
            this.on('maxfilesreached', function () {
                this.removeEventListeners();
            });
            this.on('cancled', function (file) {

            });
            this.on('sending', function (file) {

            });
        }
    });

    $("#form-fbsHead-add").validate({
        rules: {
            names: {
                required: true,
            },
            intoDate: {
                required: true,
            },
        },
        submitHandler: function (form) {
            upload();
        }
    });


    function upload () {
        if (jsonObj.excleList.length == 0) {
            layer.alert("Please upload at least one Excel file。", {
                skin: 'layui-layer-lan',
                closeBtn: 1
            });
            return;
        }


        $.ajax({
            url: '/module/fbsHead/uploadProduct',
            dataType: 'json',
            type: 'POST',
            data: {
                'list': JSON.stringify(jsonObj.excleList),
                'bz': $("#bz").val(),
                'name': $("#names").val(),
                'intoDate': $("#intoDate").val(),
            },
            success: function (data) {

                if (data.code == 120) {
                    var errorList = JSON.parse(data.msg.toString());

                    $('#bootstrap-table-err').bootstrapTable({
                        data: errorList,
                        height: "250"
                    });
                    //自定页
                    parent.layer.open({
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: false, //不显示关闭按钮
                        shift: 2,
                        shadeClose: true, //开启遮罩关闭
                        area: ['420px', '240px'], //宽高
                        content: $('#error_layer').html()
                    });

                } else {
                    $.operate.saveSuccess(data);
                }

            },
            error: function (data) {
                $.modal.alertError("system error");
            }
        });
    }

    function DownloadXls () {
        location.href = '';
        var url = "/module/fbsHead/exportDownLoadFBSXls";
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.appendTo('body').submit().remove();
    }
</script>
</body>
</html>

